<template>
  <div class="floor-plan-container" :style="rotateStyle">
    <div class="floor-plan">
      <!-- 中间楼梯区域 -->
      <div
        class="room"
        style="
          left: 35%;
          top: 30%;
          width: 13%;
          height: 40%;
          background-color: #f5f5f7;
        "
      >
        <span class="room-name" style="color: #666a7a" :style="nameStyle"
          >通道1</span
        >
      </div>
      <div
        class="room"
        style="
          left: 52%;
          top: 30%;
          width: 13%;
          height: 40%;
          background-color: #f5f5f7;
        "
      >
        <span class="room-name" style="color: #666a7a" :style="nameStyle"
          >通道2</span
        >
      </div>
      <div
        v-for="(item, index) in props.roomList"
        :key="index"
        :style="item.style"
        class="room"
        @mouseenter.stop="handleMouseOver(item, $event)"
        @click="handleClick(item)"
      >
        <span class="room-name" :style="nameStyle">{{ item.name }}</span>
      </div>
    </div>
  </div>
</template>
<script setup>
import { computed, ref } from "vue";
import { adjustColor } from "@/utils/index.js";
import bus from "@/utils/bus";
const props = defineProps({
  roomList: {
    type: Array,
    default: () => [],
  },
  rotateDu: {
    type: Number,
    default: 0,
  },
});
function handleMouseOver(item, event) {
  const room = event.target;
  const originalBgColor = room.style.backgroundColor;
  const darkerColor = adjustColor(originalBgColor, -10);
  room.style.backgroundColor = darkerColor;
  room.addEventListener(
    "mouseleave",
    () => {
      room.style.backgroundColor = originalBgColor;
    },
    { once: true }
  );
}
const rotateStyle = computed(() => {
  // 根据 rotateDu 属性计算旋转样式
  if (props.rotateDu / 90 == -1 || props.rotateDu / 90 == -3) {
    return `transform: rotate(${props.rotateDu}deg);max-width: 800px;width: 66%;`;
  }
  return `transform: rotate(${props.rotateDu}deg);`;
});
const nameStyle = computed(() => {
  return `transform: rotate(${-props.rotateDu}deg);`;
});
function handleClick(item) {
  bus.emit("openRoomDialog", item);
}
</script>
<style lang="less" scoped>
.floor-plan-container {
  width: 100%;
  max-width: 1200px;
  aspect-ratio: 3/2;
  transition: all 0.5s ease;
  transform-origin: center center;
  .floor-plan {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #fff;
    .room {
      position: absolute;
      border: 2px solid #8e9bae;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #fff;
    }
    .room-name {
      color: black;
      font-size: 16px;
      font-weight: bold;
      font-family: "SimSun", "Microsoft YaHei", sans-serif;
      transition: transform 0.5s ease;
      position: relative;
      text-align: center;
      transform-origin: center center;
      white-space: pre-wrap;
    }
  }
}
</style>
